<template>
	<view class='container bg-w'>
		<view class="header uni-flex uni-row flex-between">
			<uni-nav-bar title="维护详情">
				<template slot='left'>
					<view class="flex width-100">
						<i class='iconfont iconfanhui' @click='goBack()'></i>
					</view>
				</template>
			</uni-nav-bar>
		</view>
		<view class="position-r-top">
			<view class="main">
				<uni-list>
					<view>
						<view class="uni-list">
							<view class="form-list flex flex-between height-50 border-bottom uni-list-cell-navigate uni-navigate-right">
								<text class="color-6 ">测点名称</text>
								<text style="color: #666;">{{params.gaugingPoint}}</text>
							</view>
							<!-- <view class="form-list flex flex-between height-50 border-bottom uni-list-cell-navigate uni-navigate-right">
								<text class="color-6 ">设备ID</text>
								<text style="color: #666;">{{deviceInfo.equipmentId}}</text>
							</view> -->
							<view class="form-list flex flex-between height-50 border-bottom uni-list-cell-navigate uni-navigate-right">
								<text class="color-6 ">测点位置</text>
								<text style="color: #09AAE9;" @click="handleEGPS">导航</text>
							</view>
							<view v-for="(item,index) in whMaintainProject.subMaintainPoints" :key="index" >
								<view class="form-list flex flex-between height-50 border-bottom uni-list-cell-navigate uni-navigate-right">
									<text class="color-6 wid-80" style="overflow: hidden;">{{item.subMaintainName}}</text>
									<input type="text" placeholder="请输入维护结果" v-model="item.maintenance" />
								</view>
								<view class="form-list flex flex-between height-50 border-bottom uni-list-cell-navigate uni-navigate-right">
									<text class="color-6 wid-80" style="overflow: hidden;">{{item.subMaintainRequirement}}</text>
								</view>
							</view>
							<view class="form-list flex flex-between height-50 border-bottom">
								<text class="color-6 ">备注</text>
								<input type="text" placeholder="备注" v-model="whMaintainProject.remark" />
							</view>
							<view class="photograph">
								<view class="photograph-list">
									<view class="flex flex-between height-50 margin-b-10">
										<text>上传照片</text>
										<i class='iconfont iconpaizhao fz-22 color-6' @tap="chooseVideoImage"></i>
									</view>
									<view class="photo-list flex flex-between">
										<view class="img_box" v-for="(imgItem,imgIndex) in whMaintainProject.maintainPointFiles" :key="imgIndex">
											<image :src="imgItem.imgUrl" mode="" @click="previewImg(imgIndex,imgItem)"></image>
											<icon type="cancel" size="26" @click="delImgBtn(imgIndex)" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-list>
			</view>
			<view class="construction-footer flex">
				<button v-if="params.status!=2" type="text" @click="$noMultipleClicks(SaveBtn)">暂存</button>
				<button :class="params.status==2?'subBtn':''" type="text" @click="$noMultipleClicks(SubmitBtn)">提交</button>
			</view>
			<uni-popup ref="imgpopup" type="center">
				<view class="popup-view">
					<view class="popup-imgAll">
						<!-- <image :style="{'width': imgW,'height': imgH}" :src="imgUrl" @touchstart="start" @touchend="end" @click="closeImg"></image> -->
						<image :style="{'width': imgW,'height': imgH}" :src="imgUrl"  @click="closeImg"></image>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {findSubProjectsPic,findSubProjectsAddress,submitReview,getFileById,getDetail} from "@/common/api/MaintainReport.js"
	import {getFileInfo} from '@/common/api/api.js'
	import ipConfig from '@/utils/ipconfig.js'
	export default {
		data() {
			return {
				whMaintainProject:{maintainPointFiles:[],subMaintainPoints:[]},
				uploadData:{},
				maintainPointFiles:[],
				showAdd:true,
				count:5,
				noClick: true,
				status:'',
				disabled:false,
				deviceInfo:{},
				previewImageAll:[],
				clientX:0,
				clientY:0,
				imgUrl:'',
				imgIndex:0,
				hideVideo:false,
				imgH:null,
				imgW:null,
				screenWidth:null,
				screenHeight:null,
			}
		},
		onLoad(params) {
			this.screenWidth = uni.getSystemInfoSync().screenWidth
			this.screenHeight = uni.getSystemInfoSync().screenHeight
			this.params=params;
			this.whMaintainProject.standardProId=params.standardProId;
			this.whMaintainProject.maintainTaskId=params.maintainTaskId;
			this.whMaintainProject.maintainPointId=params.id;
			this.loadChildData();
			if(params.status==2){
				this.disabled=true;
				this.showAdd=false;
			}else{
				this.disabled=false;
				this.showAdd=true;
			}
		},
		methods: {
			loadChildData(){
				if(this.params.status==0){//未开始的状态
					findSubProjectsPic({maintainId :this.params.maintainId }).then((res)=>{
						if(res.data){
							let data=res.data;
							data.forEach(item=>{
								this.$set(item,'pointId',this.params.id)
							})
							this.$set(this.whMaintainProject, 'subMaintainPoints', data)
						}
					});
					findSubProjectsAddress({id:this.params.standardProId}).then((res)=>{
						if(res.data){
							this.deviceInfo=res.data;
						}
					})
				}else{//已完成和进行中状态
					let zdhjcSubMaintainPoints=[]
					getDetail(this.params.standardProId,this.params.subPorjectId,this.params.maintainTaskId).then(res=>{
						if(res.data){
							let data=res.data[0];
							data.zdhjcMaintainPointFiles.forEach((obj)=>{
								getFileInfo(obj.fileId).then(res => {
									let imgUrl = 'data:application/force-download;base64,' + uni.arrayBufferToBase64(res);
									this.$set(obj, 'imgUrl', imgUrl);
								})
							})
							data.zdhjcSubMaintainPoints.forEach(item=>{
								zdhjcSubMaintainPoints.push({maintenance:item.maintenance,subMaintainName:item.subMaintainName,subMaintainRequirement:item.subMaintainRequirement,pointId:item.pointId,subMaintainId:item.subMaintainId,subMaintainPointId:item.subMaintainPointId})
							})
							this.whMaintainProject.maintainPointFiles=data.zdhjcMaintainPointFiles
							this.whMaintainProject.subMaintainPoints=zdhjcSubMaintainPoints
							this.whMaintainProject.standardProId=data.standardProId
							this.whMaintainProject.maintainTaskId=data.maintainTaskId
							this.whMaintainProject.maintainPointId=data.maintainPointId
							this.whMaintainProject.remark=data.remark
							this.deviceInfo.latitude=data.designLatitude
							this.deviceInfo.longitude=data.deviationLongitude
							this.deviceInfo.equipmentId=data.equipmentId
						}
					})
				}
			},
			// 导航
			handleEGPS(){
				uni.openLocation({
				    latitude: Number(this.deviceInfo.designLatitude),
				    longitude: Number(this.deviceInfo.deviationLongitude),
					// name: this.deviceInfo.postAddr,
				});
			},
			chooseVideoImage() {
				this.chooseImages()
			},
			// 上传图片
			chooseImages() {
				uni.chooseImage({
					count: 2,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						let imgSize = 1024 * 1024 * 50
						let time = 10 * 60 * 1000
						if (res.tempFiles[0].path.includes('mp4') == true) {
							uni.showToast({
								title: '不能上传视频，请重新上传',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '图片上传中,请等待',
								icon: 'loading',
								duration: 1000
							})
							uni.uploadFile({
								url: ipConfig.ip + 'admin/sys-file/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								method: "POST",
								formData: {
									path: 'app'
								},
								header: {
									'Authorization': 'Bearer ' + uni.getStorageSync('token'),
								},
								success: (res1) => {
									if (res1.statusCode == 200) {
										let id = JSON.parse(res1.data).data.id;
										getFileById(id).then( res2 => {
											const base64 = 'data:application/force-download;base64,' + uni.arrayBufferToBase64(res2)
											this.uploadData = JSON.parse(res1.data).data;
											this.maintainPointFiles = [];
											this.maintainPointFiles = this.maintainPointFiles.concat(base64);
											uni.showToast({
												title: '图片上传成功',
												icon: 'none'
											})
											let img=[]
											this.maintainPointFiles.map(item => {
												img.push(Object.assign({},{fileType:"0",imgUrl:item,fileId:this.uploadData.id,maintainPointId:this.params.id}))
											})
											setTimeout(()=>{
												// this.showAdd = this.whMaintainProject.maintainPointFiles.length == this.count ? false :true;
												this.whMaintainProject.maintainPointFiles = this.whMaintainProject.maintainPointFiles.concat(img);
											},100)
										})
									}
								}
							})
						}
					}
				})
			},
			// 删除图片
			delImgBtn(imgIndex) {
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '您确定要删除该照片',
					success: function(res) {
						if (res.confirm) {
							_this.whMaintainProject.maintainPointFiles.splice(imgIndex, 1)
						}
					}
				});
			},
			calculate(w, h, pw, ph) {	//canvas图片自适应居中
				let px = 0;
				let py = 0;
				if(pw < w && ph < h){
						px = 0.5 * w - 0.5 * pw;
						py = 0.5 * h - 0.5 * ph;
				}else if (ph / pw > h / w) {
						let uu = ph;
						ph = h
						pw = pw * h / uu
						px = 0.5 * w - 0.5 * pw;
				} else {
						let uu = pw;
						pw = w;
						ph = ph * pw / uu
						py = 0.5 * h - 0.5 * ph;
				}
				return {px, py, pw, ph}
			},
			// 预览图片
			previewImg(imgIndex,item) {
				// // let urls = this.whMaintainProject.maintainPointFiles.filter(item => !item.type).map(item => item.imgUrl);
				// uni.previewImage({
				// 	current:imgIndex,
				// 	urls:urls
				// })
				this.imgUrl = '';
				this.$refs.imgpopup.open();
				this.hideVideo = true
				this.whMaintainProject.maintainPointFiles.forEach((obj,index) => {
					if(item.fileId == obj.fileId){
						uni.getImageInfo({
							src: ipConfig.ip + 'admin/sys-file/getFileById?id='+item.fileId,
							success: (e) => {
								let imgInfo = this.calculate(this.screenWidth,this.screenHeight-50,e.width,e.height);
								this.imgH = imgInfo.ph+'px';
								this.imgW = imgInfo.pw+'px';
								this.imgUrl = item.imgUrl
							}
						});
					}
				})
			},
			submit(type){
				this.whMaintainProject.type=type;
				let whMaintainProject=this.whMaintainProject
				this.whMaintainProject.subMaintainPoints.forEach(item=>{
					if(item.maintenance == null){
						this.flag = false;
					}else{
						this.flag = true;
					}
				})
				if(!this.flag){
					uni.showToast({
						title: "请输入维护结果",
						icon: 'none',
					})
					return;
				}else if(this.whMaintainProject.maintainPointFiles.length<1){
					uni.showToast({
						title: "请上传图片",
						icon: 'none',
					})
					return;
				}else{
					submitReview(whMaintainProject).then((res)=>{
						if(type==1){
							if (res.code != "20000") {
								uni.showToast({
									title: "暂存失败",
									icon: 'none',
								})
							} else if (res.code == "20000") {
								uni.showToast({
									title: "暂存成功",
								})
								setTimeout(()=>{
									uni.navigateBack({ delta: 1 });
								},1000)
							}
						}else{
							if (res.code != "20000") {
								uni.showToast({
									title: "提交失败",
									icon: 'none',
								})
							} else if (res.code == "20000") {
								uni.showToast({
									title: "提交成功",
								})
								setTimeout(()=>{
									uni.navigateBack({ delta: 1 });
								},1000)
							}
						}
					})
				}
			},
			// 保存
			SaveBtn() {
				this.submit(1)
			},
			// 提交
			SubmitBtn(){
				this.submit(2)
			},
			closeImg(){
				this.hideVideo = false
				this.$refs.imgpopup.close();
			},
		}
	}
</script>

<style lang="less" scoped>
	.main {
		height: 100%;
		flex: 1;
		padding-bottom: 106rpx;
		overflow: scroll;
	}
	.form-list,.photograph {
		padding: 0 3%;
		background-color: #fff;
	}
	.photo-list{
		flex-wrap: wrap;
	}
	uni-input {
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
		font-size: 28rpx;
		min-width: 60%;
		max-width: 80%;
		color: #666 !important
	}
	/deep/uni-button:after {
		border: none;
		border-radius: none;
	}
	.img_box {
		width: 48%;
		position: relative;
		margin-bottom: 10rpx;
	}
	/deep/.photograph .photo-list uni-image{
		width: 100% !important;
		height: 220rpx;
	
	}
	
	.photograph-list {
		color: #666;
	}
	
	.img_box uni-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}
	
	/deep/.img_box uni-icon .uni-icon-cancel {
		color: #fff;
	}
	.construction-footer {
		width: -webkit-fill-available;
		height: 100rpx;
		display: flex;
		position: fixed;
		bottom: 0;
	
		button {
			font-size: 28rpx;
			color: #fff;
			width: 50%;
			line-height: 100rpx;
			border-radius: 0;
		}
		button:first-child {
			background-color: #fff;
			color: #000;
			border-right: 1px solid #fff;
		}
	
		button:last-child {
			background-color: #09AAE9;
		}
		.subBtn{
			width: 100%;
			color: #fff !important;
		}
	}
</style>
